{% extends "repo/repo.html" %}

{% block bubble_inner_class_name %} issues{% endblock %}

{% block subcontainer %}

	<nav class="sidebar">
		{% include "repo/condition.html" %}
	</nav>

	<section class="issue-list">
		<header class="header">
			<h1 class="heading">Gitshell Issues</h1>
			<ul class="btn-group sort">
				<li><a href="/{{user_name}}/{{repo_name}}/issues/create/0/" class="btn btn-mini btn-primary">创建问题</a></li>
				<li class="leader">排序:</li>
				<li class="first">{%if orderby == 'create_time'%}<a id="i_modify_time" href="javascript:void(0)" class="btn btn-mini first">更新</a>{%else%}<span class="btn btn-mini btn-disable">更新</span>{%endif%}</li>
				<li class="last">{%if orderby == 'modify_time'%}<a id="i_create_time" href="javascript:void(0)" class="btn btn-mini last">创建</a>{%else%}<span class="btn btn-mini btn-disable">创建</span>{%endif%}</li>
			</ul>
		</header>

		<div class="c_issue issue cell">
			<header class="header">
				<h1 id="i_issue_subject" class="heading"><span class="label">#{{issue.id}}</span>{{issue.subject}}</h1>
				<p class="meta">
					<span class="assiged"><b>指派:</b>
						<a href="/{{issue.username}}/">{{issue.username}}</a>
						<span>&rarr;</span>
						<a href="/{{issue.assigned}}/">{{issue.assigned}}</a>
					</span>
					<span class="unixtime">{{issue.modify_time}}</span>
					<span class="actions">
						<a href="" rel="tooltip" data-original-title="可拖动到上面"><i class="icon-bell"></i></a>
            <a id="i_issue_edit" href="/{{user_name}}/{{repo_name}}/issues/create/{{issue.id}}/">修改</a>
					</span>
				</p>
			</header>
			<div class="data">
				<p class="content">{{issue.content}}</p>
			</div>
		</div>

		{%if issue_comments%}
			{%for issue_comment in issue_comments%}
				<div data-user-name="{{issue_comment.user_id}}" class="comment">
					<figure class="avatar">
						<img src="https://gravatar.com/avatar/{{ issue_comment.user_img }}?s=38" alt="{{issue.comment}}">
					</figure>
					<div class="info">
						<p class="commenter">
							<a href="/{{issue_comment.user_id}}/">{{issue_comment.user_id}}</a>
							<span class="unixtime">{{issue_comment.create_time}}</span>
						</p>
						<p class="comment-data">{{issue_comment.content}}</p>
						<p class="meta">
							<a class="c_ref_comment" href="javascript:void(0)" value="{{issue_comment.user_id}}">回复</a>
							<a class="c_rm_comment" value="{{issue_comment.id}}" href="javascript:void(0)">删除</a>
						</p>
					</div>
				</div>
			{%endfor%}
		{%endif%}

		{%if total_page|length > 1%}
			<footer class="footer">
				<nav class="pagination">
					<ul>
						{%for i in total_page%}
							{%if i == page%}
								<li class="active"><a href="/{{user_name}}/{{repo_name}}/issues/{{issue.id}}/{{i}}/">{{i}}</a></li>
							{%else%}
								<li><a href="/{{user_name}}/{{repo_name}}/issues/{{issue.id}}/{{i}}/">{{i}}</a></li>
							{%endif%}
						{%endfor%}
					</ul>
				</nav>
			</footer>
		{%endif%}

		<form id="i_comment" class="comment user-plugin form-inline" action="" method="post">
			{% csrf_token %}
			<figure class="avatar">
				<img src="https://gravatar.com/avatar/{{user_name}}?s=38" alt="{{user_name}}">
			</figure>
			<div class="info">
				{{repoIssuesCommentForm.content}}
				<button id="i_submit" class="btn btn-primary" type="submit">发表评论</button>
				<p class="meta">不可修改，严谨发言</p>
			</div>
		</form>
	</section>

{% endblock %}

{% block subjs %}
<!--script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script-->
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/jquery-ui.min.js"></script>
<!--script src="http://lib.sinaapp.com/js/jquery-ui/1.8.11/jquery-ui.min.js"></script-->
<script>
$(function(){

	$(".comment").hover(
		function(){
			$(this).find(".meta").fadeTo(0, 1);
		},function(){
			$(this).find(".meta").fadeTo(0, 0);
		}
	);


    {% if has_issues_modify_right %}
    $('#i_issue_subject').bind('mouseover mouseout', function(event) {
        if (event.type == 'mouseover') {
            $('#i_issue_edit').show();
        } else {
            $('#i_issue_edit').hide();
        }
    });
    {% endif %}
    $('.issue').bind('mouseover mouseout', function(event) {
        if (event.type == 'mouseover') {
            var issues_user_name = $(this).attr('data-user-name');
            if('{{user.username}}' == '{{user_name}}' || issues_user_name == '{{user.username}}') {
                $(this).find('.c_rm_comment').show();
            }
        } else {
            $(this).find('.c_rm_comment').hide();
        }
    });
    $('.c_drag_setting').mouseover(function() {
        $('.c_create_issues_btn').hide();
        $('#id_issues_condition').show();
    });
    $('.c_rm_rf_comment').click(function(){
        var comment_id = $(this).attr('value');
        $.ajax({
            url: '/{{user_name}}/{{repo_name}}/issues/comment/delete/' + comment_id + '/',
            type: 'POST',
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
            dataType: 'json',
            timeout: 10000,
            error: function(){
            },
            success: function(json){
                window.location = '/{{user_name}}/{{repo_name}}/issues/{{issue.id}}/{{page}}/'
            },
        });
    });
    $('.c_rm_rf_comment').blur(function(){
        setTimeout(
            function(event) {
                $(this).hide();
            }
        , 300);
    });
    $('.c_rm_comment').click(function(){
        $(this).next().show();
        $(this).next().focus();
    });
    $('#i_submit').mouseover(function(){
        $('#i_comment_content').show();
        $('#id_content').focus();
    });
    $('#i_submit').click(function(){
        if($('#id_content').val() != '') {
            $(this).submit();
            return true;
        }
        return false;
    });
    $('.c_ref_comment').click(function(){
        var ref_username = $(this).attr('value');
        $('#id_content').val($('#id_content').val() + ' @' + ref_username + ' ');
        $('#i_comment_content').show();
        $('#id_content').focus();
        var val = $('#id_content').val();
        $('#id_content').val('')
        $('#id_content').val(val)
    });
    $('.c_unixtime').each(function(index){ 
        $(this).html(moment(new Date($(this).html()*1000)).fromNow());
        $(this).show();
    });
    $('.c_issue').tooltip({
      selector: "a[rel=tooltip]"
    })
    $('.c_drag_setting').draggable({
        cursor: 'move',
        revert: true
    });
    $('.issues_attr').droppable({
        accept: '.c_drag_setting',
        hoverClass: 'issues_attr_hovered',
        drop: handleIssueDrop,
    });
    function handleIssueDrop(event, ui){
        var issue_id = ui.draggable.attr('value');
        var issue_attr = $(this).attr('value');
        $.ajax({
            url: '/{{user_name}}/{{repo_name}}/issues/update/' + {{issue.id}} + '/' + issue_attr + '/',
            type: 'POST',
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
            dataType: 'json',
            timeout: 10000,
            error: function(){
            },
            success: function(json){
                window.location = '/{{user_name}}/{{repo_name}}/issues/{{issue.id}}/{{page}}/'
            },
        });
    }
});
</script>
{% endblock %}
